/**
 * 气体监测数据处理脚本
 * 用于从Android原生接口获取气体检测数据并展示
 */

// 页面加载完成后自动获取数据
document.addEventListener('DOMContentLoaded', function () {
    // 初始化Android接口
    initAndroidInterface('气体监测页面');
    
    // 初始化页面
    updateGasMonitoringUI();
    
    // 初始化标签页切换事件
    layui.use('element', function() {
        const element = layui.element;
        element.on('tab()', function(data) {
            // 如果切换到历史记录标签页，初始化历史数据页面
            if (data.index === 1) {
                initHistoryDataPage();
            }
        });
    });

    // 绑定刷新按钮事件
    document.getElementById('refresh-btn').addEventListener('click', function() {
        updateGasMonitoringUI(false);
    });
});

// 页面卸载时清除定时器
document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'hidden') {
        console.log('页面隐藏，清除自动刷新定时器');
            if (window._gasDataRefreshTimer) {
                clearTimeout(window._gasDataRefreshTimer);
            window._gasDataRefreshTimer = null;
            }
    } else if (document.visibilityState === 'visible') {
        console.log('页面可见，重新启动自动刷新');
        // 页面重新变为可见时，如果之前的定时器已被清除，则重新开始自动刷新
        if (!window._gasDataRefreshTimer) {
            updateGasMonitoringUI();
        }
    }
});

/**
 * 获取气体实时数据
 * 
 * @param {Object} options 可选参数对象
 * @param {number} options.deviceId 可选，指定设备ID，不传则获取所有设备数据
 * 
 * @returns {Promise<Object>} 返回Promise对象
 *                           成功时返回处理后的气体数据
 *                           失败时返回错误信息
 */
function getGasRealtimeData(options = {}) {
    console.log("getGasRealtimeData",options);
    return new Promise((resolve, reject) => {
        // 准备请求参数
        const params = options.deviceId ? { deviceId: options.deviceId } : {};
        
        // 调用Android原生接口获取数据
        callAndroidMethodAsync('getGasRealtimeData', params)
            .then(response => {
                if (response.success) {
                    resolve(convertGasDataForRendering(response.data));
                    } else {
                    reject(new Error(response.msg || '获取数据失败'));
                    }
                })
                .catch(error => {
                console.warn('API调用失败:', error);
                reject(error);
            });
    });
}

/**
 * 更新页面中的气体监测数据
 * 
 * @param {boolean} autoRefresh 是否自动刷新数据，默认为true
 * @param {number} refreshInterval 自动刷新的时间间隔（毫秒），默认5000ms
 */
function updateGasMonitoringUI(autoRefresh = true, refreshInterval = 5000) {
    // 判断当前是否使用模拟数据模式
    const useMockData = shouldUseMockData();
    console.log(`使用${useMockData ? '模拟' : '实时'}数据模式`);
    
    // 根据模式选择不同的数据获取方式
    let dataPromise;
            
    if (useMockData) {
        // 模拟数据模式：获取模拟数据
        dataPromise = getMockGasRealTimeValues()
            .then(() => getMockGasDataForRendering());
    } else {
        // 实时数据模式：从后端API获取实时数据
        dataPromise = getGasRealtimeData();
    }
    // 处理获取到的数据
    dataPromise.then(gasData => {
        renderGasData(gasData);
        })
        .catch(error => {
            console.error('获取气体监测数据异常:', error);
        });
    
    // 自动刷新
    if (autoRefresh) {
        console.log("autoRefresh",autoRefresh);
        if (window._gasDataRefreshTimer) {
            clearTimeout(window._gasDataRefreshTimer);
        }
        
        window._gasDataRefreshTimer = setTimeout(() => {
            updateGasMonitoringUI(true, refreshInterval);
        }, refreshInterval);
    }
}

/**
 * 渲染气体数据到UI
 * @param {Array} gasData 气体监测数据数组
 */
function renderGasData(gasData) {
    const container = document.querySelector('.main-content');
    if (!container) {
        console.error("找不到.main-content容器元素");
        return;
    }
    
    // 清空现有内容
    container.innerHTML = '';

    if (!gasData || !Array.isArray(gasData) || gasData.length === 0) {
        showEmpty('暂无气体监测数据');
        return;
    }
    
    // 遍历每个设备
    gasData.forEach((device, deviceIndex) => {
        const deviceTable = document.createElement('div');
        deviceTable.className = 'table';
        
        const table = document.createElement('table');
        table.cellPadding = '0';
        table.cellSpacing = '0';
        
        // 表头
        const thead = document.createElement('thead');
        const headerRow = document.createElement('tr');
        
        const nameCell = document.createElement('td');
        nameCell.textContent = device.deviceName || '未命名设备';
        
        const statusCell = document.createElement('td');
        statusCell.textContent = `状态: ${device.isActive ? '正常' : '离线'}`;
        
        headerRow.appendChild(nameCell);
        headerRow.appendChild(statusCell);
        thead.appendChild(headerRow);
        table.appendChild(thead);
        
        // 表体
        const tbody = document.createElement('tbody');
        
        // 检查点位数据是否存在
        if (!device.pointData || !Array.isArray(device.pointData) || device.pointData.length === 0) {
            const emptyRow = document.createElement('tr');
            const emptyCell = document.createElement('td');
            emptyCell.colSpan = 2;
            emptyCell.textContent = '暂无数据点';
            emptyCell.style.textAlign = 'center';
            emptyRow.appendChild(emptyCell);
            tbody.appendChild(emptyRow);
        } else {
            // 遍历每个数据点
        device.pointData.forEach(point => {
                tbody.appendChild(createGasRow(
                    point.name,
                    point.symbol,
                    point.value,
                    point.unit
                ));
            });
        }
        
        table.appendChild(tbody);
        deviceTable.appendChild(table);
        container.appendChild(deviceTable);
    });
}

/**
 * 创建气体数据行
 * @param {string} name 气体名称
 * @param {string} symbol 气体符号
 * @param {string} value 数值
 * @param {string} unit 单位
 * @returns {HTMLTableRowElement} 表格行元素
 */
function createGasRow(name, symbol, value, unit) {
    const row = document.createElement('tr');
    
    const nameCell = document.createElement('td');
    const nameSpan = document.createElement('span');
    nameSpan.textContent = name;
    
    const symbolSpan = document.createElement('span');
    symbolSpan.textContent = symbol ? `(${symbol})` : '';
    
    nameCell.appendChild(nameSpan);
    nameCell.appendChild(symbolSpan);
    
    const valueCell = document.createElement('td');
    const valueDiv = document.createElement('div');
    
    const valueSpan = document.createElement('span');
    valueSpan.textContent = value;
    
    const unitSpan = document.createElement('span');
    unitSpan.textContent = unit;
    
    valueDiv.appendChild(valueSpan);
    valueDiv.appendChild(unitSpan);
    valueCell.appendChild(valueDiv);
    
    row.appendChild(nameCell);
    row.appendChild(valueCell);
    
    return row;
}

/**
 * 将后端返回的气体监测数据转换为适合渲染的格式
 * 
 * @param {Object} data 从Java后端获取的气体监测数据
 *                格式为: {"设备类型": [测点列表]}
 * 
 * @returns {Array} 处理后的设备数据数组
 *                  格式为: [{deviceName: "设备类型名", isActive: true, pointData: [测点数据]}]
 */
function convertGasDataForRendering(data) {
    try {
        // 生成当前时间
        const now = new Date();
        const timestamp = now.getTime();
        const timeString = formatDateTime(now);

        // 处理设备类型对象 {"SIEMENS_S7": [...], "MODBUS_TCP": [...]}
        const deviceArray = [];
        
        for (const deviceType in data) {
            const pointList = data[deviceType];
            // 跳过非数组的点位列表
            if (!Array.isArray(pointList)) continue;
            
            // 创建设备对象并添加到设备数组
            const deviceObj = {
                deviceName: deviceType,  // 设备类型名称
                isActive: true,          // 设备状态标记
                pointData: []            // 测点数据数组
            };
            
            // 处理每个测点数据
            deviceObj.pointData = pointList.map(point => {
                // 提取或设置默认值
                const name = point.name || '未知点位';
                const symbol = point.englishName || '';
                const value = point.value !== undefined ? point.value.toFixed(2) : '0.00';
                
                // 返回格式化后的测点对象
                return {
                    name: name,           // 测点名称
                    symbol: symbol,       // 英文符号
                    value: value,         // 格式化后的数值
                    unit: point.unit || '',        // 单位
                    address: point.address || '',  // 地址
                    timestamp: timestamp,          // 时间戳
                    timeString: timeString         // 格式化时间
                };
            });
            
            // 添加到设备数组
            deviceArray.push(deviceObj);
        }
        
        return deviceArray;
    } catch (error) {
        console.error("转换气体数据格式失败:", error);
        return getMockGasDataForRendering();
    }
}

/**
 * 获取气体实时数据
 * @returns {Promise<Object>} 气体实时值
 */
function getGasRealTimeValues() {
    // 直接使用mock-gas-data.js中的函数
    return getMockGasRealTimeValues();
}

/**
 * 获取气体历史数据
 * 
 * @param {Object} options 请求参数
 * @param {number} options.deviceId 设备ID
 * @param {string} options.address 测点地址
 * @param {number} options.startTime 开始时间戳
 * @param {number} options.endTime 结束时间戳
 * @param {number} options.limit 限制返回记录数量，默认1000
 * 
 * @returns {Promise<Array>} 返回Promise对象，成功时返回历史数据数组
 */
function getGasHistoryData(options) {
    // 验证必要参数
    if (!options.deviceId || !options.address || !options.startTime || !options.endTime) {
        return Promise.reject(new Error('缺少必要参数，需要设备ID、测点地址、开始时间和结束时间'));
    }
    
    return new Promise((resolve, reject) => {
        // 调用Android原生接口获取历史数据
        callAndroidMethodAsync('getGasHistoryData', options)
            .then(response => {
                if (Array.isArray(response)) {
                    // 如果返回的是数组，直接使用
                    resolve(response);
                } else if (response.success) {
                    // 如果返回的是标准ApiResponse格式
                    resolve(response.data);
                } else {
                    reject(new Error(response.msg || '获取历史数据失败'));
                }
            })
            .catch(error => {
                console.error('获取历史数据失败:', error);
                reject(error);
            });
    });
}

/**
 * 初始化历史数据页面
 * 设置事件监听、初始化图表等
 */
function initHistoryDataPage() {
    // 加载设备列表到下拉选择器中
    loadDeviceOptions();
    
    // 设备选择变化时加载对应的测点列表
    document.getElementById('device-selector').addEventListener('change', function() {
        const deviceId = this.value;
        if (deviceId) {
            loadPointOptions(deviceId);
        } else {
            // 清空测点选择器
            const pointSelector = document.getElementById('point-selector');
            pointSelector.innerHTML = '<option value="">选择测点</option>';
        }
    });
    
    // 初始化日期范围选择器
    layui.use('laydate', function() {
        const laydate = layui.laydate;
        laydate.render({
            elem: '#date-range',
            type: 'datetime',
            range: true,
            theme: '#1E9FFF'
        });
    });
    
    // 查询按钮点击事件
    document.getElementById('query-history').addEventListener('click', queryHistoryData);
    
    // 初始化空图表
    initHistoryChart();
}

/**
 * 加载设备选项到下拉选择器
 */
function loadDeviceOptions() {
    const deviceSelector = document.getElementById('device-selector');
        
    // 清空现有选项
    deviceSelector.innerHTML = '<option value="">选择设备</option>';
    
    // 获取设备列表
    callAndroidMethodAsync('getDeviceList', {})
        .then(response => {
            if (response.success && Array.isArray(response.data)) {
                response.data.forEach(device => {
                    const option = document.createElement('option');
                    option.value = device.id;
                    option.textContent = device.name || device.deviceType;
                    deviceSelector.appendChild(option);
                });
            }
        })
        .catch(() => {
            // 使用默认设备ID，用于测试
            const option = document.createElement('option');
            option.value = "1";
            option.textContent = "测试设备";
            deviceSelector.appendChild(option);
        });
}

/**
 * 加载指定设备的测点选项到下拉选择器
 * @param {number} deviceId 设备ID
 */
function loadPointOptions(deviceId) {
    const pointSelector = document.getElementById('point-selector');
    
    // 清空现有选项
    pointSelector.innerHTML = '<option value="">选择测点</option>';
    
    // 获取指定设备的气体监测测点
    getGasRealtimeData({ deviceId: deviceId })
        .then(deviceDataArray => {
            // 找到对应设备的数据
            const deviceData = deviceDataArray.find(d => d.deviceId == deviceId || d.deviceName.includes(deviceId));
            
            if (deviceData && deviceData.pointData && Array.isArray(deviceData.pointData)) {
                deviceData.pointData.forEach(point => {
                    const option = document.createElement('option');
                    option.value = point.address;
                    option.textContent = `${point.name}(${point.symbol || ''})`;
                    option.dataset.unit = point.unit;
                    pointSelector.appendChild(option);
                });
            }
        })
        .catch(() => {
            // 添加一些测试测点
            const testPoints = [
                { address: "40004", name: "磷化氢", symbol: "PH3", unit: "PPM" },
                { address: "40013", name: "氧气", symbol: "O2", unit: "%" },
                { address: "40017", name: "二氧化碳", symbol: "CO2", unit: "%" }
            ];
            
            testPoints.forEach(point => {
                const option = document.createElement('option');
                option.value = point.address;
                option.textContent = `${point.name}(${point.symbol})`;
                option.dataset.unit = point.unit;
                pointSelector.appendChild(option);
            });
        });
}

/**
 * 初始化历史数据图表
 */
function initHistoryChart() {
    // 基于准备好的dom，初始化echarts实例
    const chartDom = document.getElementById('history-chart');
    if (!chartDom) return;
    
    const myChart = echarts.init(chartDom);
    
    // 保存chart实例
    window._historyChart = myChart;
    
    // 设置图表配置项
    const option = {
        backgroundColor: 'transparent',
        title: {
            text: '气体监测历史数据',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'time',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            },
            axisLabel: {
                color: 'rgba(255,255,255,0.7)'
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            },
            axisLabel: {
                color: 'rgba(255,255,255,0.7)'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            }
        },
        series: [
            {
                name: '暂无数据',
                type: 'line',
                areaStyle: {
                    opacity: 0.3
                },
                emphasis: {
                    focus: 'series'
                },
                showSymbol: false,
                data: []
            }
        ]
    };
    
    // 使用配置项显示图表
    myChart.setOption(option);
    
    // 监听窗口大小变化，更新图表大小
    window.addEventListener('resize', function() {
        myChart.resize();
    });
}

/**
 * 查询历史数据
 */
function queryHistoryData() {
    // 获取查询参数
    const deviceId = document.getElementById('device-selector').value;
    const address = document.getElementById('point-selector').value;
    const dateRange = document.getElementById('date-range').value;
    
    // 验证参数
    if (!deviceId || !address) {
        showMessage('请选择设备和测点', 'error');
        return;
    }
    
    if (!dateRange) {
        showMessage('请选择时间范围', 'error');
        return;
    }
    
    // 解析时间范围
    const [startStr, endStr] = dateRange.split(' - ');
    const startTime = new Date(startStr).getTime();
    const endTime = new Date(endStr).getTime();
    
    if (isNaN(startTime) || isNaN(endTime)) {
        showMessage('时间格式不正确', 'error');
        return;
    }
    
    // 显示加载中
    showLoading(true);
    
    // 获取历史数据
    getGasHistoryData({
        deviceId: parseInt(deviceId),
        address: address,
        startTime: startTime,
        endTime: endTime,
        limit: 1000  // 最多返回1000条记录
    })
    .then(historyData => {
        // 隐藏加载中
        showLoading(false);
        
        // 更新图表和表格
        updateHistoryChart(historyData);
        updateHistoryTable(historyData);
    })
    .catch(error => {
        showLoading(false);
        showMessage('获取历史数据失败: ' + error.message, 'error');
    });
}

/**
 * 更新历史数据图表
 * @param {Array} historyData 历史数据数组
 */
function updateHistoryChart(historyData) {
    if (!window._historyChart) return;
    
    if (!historyData || !Array.isArray(historyData) || historyData.length === 0) {
        // 显示空数据
        window._historyChart.setOption({
            series: [
                {
                    name: '暂无数据',
                    data: []
                }
            ]
        });
        return;
    }
    
    // 获取选中的测点名称和单位
    const pointSelector = document.getElementById('point-selector');
    const selectedOption = pointSelector.options[pointSelector.selectedIndex];
    const pointName = selectedOption.textContent;
    const unit = selectedOption.dataset.unit || '';
    
    // 准备图表数据
    const chartData = historyData.map(item => [
        item.timestamp,          // 时间戳作为X轴
        parseFloat(item.value)   // 数值作为Y轴
    ]).sort((a, b) => a[0] - b[0]); // 按时间排序
    
    // 更新图表
    window._historyChart.setOption({
        title: {
            text: `${pointName} 历史数据`
        },
        tooltip: {
            formatter: function(params) {
                const data = params[0].data;
                const date = new Date(data[0]);
                const value = data[1];
                
                return `${formatDateTime(date)}<br/>
                       ${pointName}: ${value} ${unit}`;
            }
        },
        yAxis: {
            name: unit,
            nameTextStyle: {
                color: 'rgba(255,255,255,0.7)'
            }
        },
        series: [
            {
                name: pointName,
                type: 'line',
                data: chartData,
                lineStyle: {
                    width: 2,
                    color: '#4CAF50'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(76, 175, 80, 0.5)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(76, 175, 80, 0.1)'
                        }
                    ])
                },
                markLine: {
                    silent: true,
                    lineStyle: {
                        color: '#FF4500'
                    },
                    data: getThresholdLines(historyData[0])
                }
            }
        ]
    });
}

/**
 * 获取阈值线配置
 * @param {Object} dataItem 数据项，包含警告值和危险值
 * @returns {Array} 阈值线配置数组
 */
function getThresholdLines(dataItem) {
    const lines = [];
    
    if (!dataItem) return lines;
    
    if (dataItem.warningValue !== undefined && dataItem.warningValue !== null) {
        lines.push({
            name: '警告阈值',
            yAxis: dataItem.warningValue,
            lineStyle: {
                color: '#FFA000',
                type: 'dashed'
            },
            label: {
                show: true,
                position: 'end',
                formatter: '警告: {c}'
            }
        });
    }
    
    if (dataItem.dangerValue !== undefined && dataItem.dangerValue !== null) {
        lines.push({
            name: '危险阈值',
            yAxis: dataItem.dangerValue,
            lineStyle: {
                color: '#F44336',
                type: 'dashed'
            },
            label: {
                show: true,
                position: 'end',
                formatter: '危险: {c}'
            }
        });
    }
    
    return lines;
}

/**
 * 更新历史数据表格
 * @param {Array} historyData 历史数据数组
 */
function updateHistoryTable(historyData) {
    const tableContainer = document.getElementById('history-table');
    
    if (!historyData || !Array.isArray(historyData) || historyData.length === 0) {
        tableContainer.innerHTML = '<tr><td colspan="3" style="text-align:center;">暂无数据</td></tr>';
        return;
    }
    
    // 使用layui表格
    layui.use('table', function() {
        const table = layui.table;
        
        // 渲染表格
        table.render({
            elem: '#history-table',
            data: historyData,
            height: 'full-450',  // 表格高度
            cols: [[
                {field: 'timeString', title: '时间', width: 180, sort: true},
                {field: 'name', title: '名称', width: 120},
                {field: 'value', title: '数值', width: 120, sort: true, templet: function(d) {
                    // 根据阈值设置颜色
                    let className = '';
                    const value = parseFloat(d.value);
                    
                    if (d.dangerValue !== undefined && value >= d.dangerValue) {
                        className = 'danger';
                    } else if (d.warningValue !== undefined && value >= d.warningValue) {
                        className = 'warning';
                    }
                    
                    return `<span class="${className}">${d.value} ${d.unit || ''}</span>`;
                }},
                {field: 'status', title: '状态', width: 100, templet: function(d) {
                    if (d.status === 'danger') {
                        return '<span style="color: #F44336;">危险</span>';
                    } else if (d.status === 'warning') {
                        return '<span style="color: #FFA000;">警告</span>';
                    } else {
                        return '<span style="color: #4CAF50;">正常</span>';
                    }
                }}
            ]],
            page: true,  // 开启分页
            limit: 15,   // 每页显示的条数
            limits: [15, 30, 50, 100],
            skin: 'line',
            even: true
        });
    });
}

// 使用warom-utils.js中的通用方法
// showMessage(message, type, duration)
// showLoading(isLoading, loadingElementId)

